<!-- 138 -->
<template>
  <div>
    <a-space class="common-button-group">
      <a-button type="primary" :loading="searchBtnLoading" @click="getList">{{ $t('common_query') }}</a-button>
    </a-space>
    <t-query-form layout="inline"
      ref="queryForm"
      group="viewCstHistory"
      :model="queryForm"
      >
      <a-row
        :gutter="[16, 0]"
      >
        <a-col :span="6">
          <a-form-item :label="$t('T9_shopId')" name="shopId" prop="shopId" :rules="{ required: true, message: '请选择Shop Id', trigger: 'change'}">
            <a-select v-model:value="queryForm.shopId" class="select-width" @change="changeShopId">
              <a-select-option v-for="item in shopIdArr"
              :key="item.shopId" :value="item.shopId">
              {{item.shopId}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_cstSpec')" name="CST Spec">
            <a-select v-model:value="queryForm.cstSpec" class="select-width" @change="changeCstSpec">
              <a-select-option v-for="item in cstSpecArr"
              :key="item.cstSpecName" :value="item.cstSpecName">
              {{item.cstSpecName}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_cstId')" name="CST ID">
            <a-select v-model:value="queryForm.cstId" class="select-width">
              <a-select-option v-for="item in cstIdArr"
              :key="item.durableName" :value="item.durableName">
              {{item.durableName}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('t9_date')" name="date">
            <a-range-picker
              :show-time="{ format: 'HH:mm:ss' }"
              :default-value="queryForm.Date"
              format="YYYY-MM-DD HH:mm:ss"
              @ok="onChange"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-2">
      <a-col :span="15" class="global-oper-row-title">{{ $t('T9_cstList') }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button>{{ $t('t9_toExcel') }}</a-button>
      </a-col>
    </a-row>
    <t-table
      @row-click="getRowData"
      :data="table.cstListByMachineDTOList"
    >
      <t-column field="eventTime" :title="$t('T9_eventTime')" />
      <t-column field="eventName" :title="$t('T9_eventName')" />
      <t-column field="eventUser" :title="$t('T9_eventUser')" />
      <t-column field="eventComment" :title="$t('T9_eventComment')" />
      <t-column field="reasonCode" :title="$t('T9_reasonCode')" />
      <t-column field="transferState" :title="$t('T9_transferState')" />
      <t-column field="eqpId" :title="$t('T9_eqId')" />
      <t-column field="zoneId" :title="$t('T9_zonId')" />
      <t-column field="portId" :title="$t('T9_portId')" />
      <t-column field="dspFlag" :title="$t('T9_dspFlag')" />
      <t-column field="cstState" :title="$t('T9_cstState')" />
      <t-column field="cstCleanState" :title="$t('T9_cstCleanState')" />
      <t-column field="cstHoldState" :title="$t('T9_cstHoldState')" />
      <t-column field="controlOwner" :title="$t('T9_controlOwner')" />
      <t-column field="controlSite" :title="$t('T9_controlSite')" />
      <t-column field="cancelTpe" :title="$t('T9_cancelType')" />
      <t-column field="timeUsedLimit" :title="$t('T9_timeUseLimit')" />
      <t-column field="timeUsed" :title="$t('T9_timeUsed')" />
      <t-column field="maxUsedDayLimit" :title="$t('T9_maxUsedDaysLimit')" />
      <t-column field="durationUsed" :title="$t('T9_durationUsed')" />
      <t-column field="name" :title="$t('T9_durationUsedTime')" />
      <t-column field="capacity" :title="$t('T9_capacity')" />
      <t-column field="lastCleanTime" :title="$t('T9_lastCleanTime')" />
      <t-column field="department" :title="$t('T9_department')" />
    </t-table>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import moment from 'moment'
  import {
    getShopId,
    getCstSpec,
    getCstId,
    getList
  } from '@/api/common'
  import { getCurrentDate } from '@/utils/utils'

  export default defineComponent({
    name: 'viewCstHistory',
    components: {},
    data() {
      return {
        searchBtnLoading: false,
        table: {
          list: []
        },
        shopIdArr: [],
        cstIdArr: [],
        cstSpecArr: [],
        queryForm: {
          shopId: 'Cell',
          cstSpec: '',
          cstId: '',
          Date: []
        },
        eventComment: ''
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getShopId()
      this.getList()
      this.queryForm.Date = [moment(getCurrentDate(), 'YYYY-MM-DD HH:mm:ss'), moment(getCurrentDate(1), 'YYYY-MM-DD HH:mm:ss')]
    },
    methods: {
      onChange(value) {
        this.queryForm.Date = value
      },
      changeShopId(val) {
        if (val) {
          this.getCstSpec()
        }
      },
      changeCstSpec(val) {
        if (val) {
          this.getCstId()
        }
      },
      getShopId() {
        const params = {
          userGroup: 'CellPIOper'
        }
        getShopId(params).then(res => {
          this.shopIdArr = res
        })
      },
      getCstSpec() {
        const params = {
          shopId: this.queryForm.shopId
        }
        getCstSpec(params).then(res => {
          this.cstSpecArr = res
        })
      },
      getRowData(row) {
        this.eventComment = row.eventComment
      },
      getList() {
        const obj = {
          dtoName: 'ViewCstHistoryDTO',
          startTime: this.queryForm.Date.length !== 0 ? this.queryForm.Date[0].format('YYYY-MM-DD HH:mm:ss') : null,
          endTime: this.queryForm.Date.length !== 0 ? this.queryForm.Date[1].format('YYYY-MM-DD HH:mm:ss') : null,
          cstId: this.queryForm.cstId,
          cstSpec: this.queryForm.cstSpec,
          queryId: 'GetDurableHistoryList',
          shopId: this.queryForm.shopId,
          version: '80008',
          menuName: 'viewCstHistory',
          usage: 'getCstHistory'
        }
        getList(obj).then(res => {
          this.table = res
        })
      },
      getCstId() {
        const params = {
          bayId: this.queryForm.cstSpec,
          shopId: this.queryForm.shopId
        }
        getCstId(params).then(res => {
          this.cstIdArr = res
        })
      }
    }
  })
</script>
<style lang="less" scoped>
</style>
